<template>
  <a-row>
    <a-spin :spinning="articleLoading">
      <a-col :span="3">
        <a-tabs :style="{ height: '485px' }" default-active-key="1" tab-position="left" @change="onChangeCategory">
          <a-tab-pane v-for="item in categoryOpts" :key="item.id" :tab="item.title"></a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col v-if="articleVisible" :span="21">
        <div :style="{ textAlign: 'right' }">
          <a-input-search
            placeholder="请输入搜索内容"
            style="width: 350px; margin-bottom: 15px;"
            enter-button="搜索"
          />
        </div>
        <s-table
          ref="table"
          size="small"
          :row-key="(record) => record.id"
          :columns="articleColumns"
          :data="articleData"
        >
          <template slot="category_name" slot-scope="text">
            <a-tag>{{ text }}</a-tag>
          </template>
          <template slot="article_title" slot-scope="text, record">
            <a-button size="small" type="link" :title="text" @click="toDetail(record.id)">{{ text }}</a-button>
          </template>
        </s-table>
<!--        <div :style="{ textAlign: 'right' }">-->
<!--          <a-input-search-->
<!--            disabled-->
<!--            placeholder="请输入提问内容"-->
<!--            style="width: 350px; margin-top: 15px"-->
<!--            enter-button="提交问题"-->
<!--          />-->
<!--        </div>-->
      </a-col>
      <a-col v-else :span="21">
       <div style="padding: 0 15px;">
         <a-button size="small" type="default" icon="rollback" @click="backArticleList">返回</a-button>
         <div :style="{ margin: '20px 0' }">
           <h2 style="font-size: 20px">{{ articleDetail.title }}</h2>
           <!--          <span :style="{ fontSize: '12px'}">-->
           <!--            {{ articleDetail.category_name }}-->
           <!--            <a-divider type="vertical" />-->
           <!--            {{ articleDetail.create_time }}-->
           <!--          </span>-->
         </div>
         <article v-html="articleDetail.content"></article>
         <a-divider />
         <h3>推荐相关问题</h3>
         <a-list item-layout="horizontal" :data-source="hotArticle">
           <a-list-item slot="renderItem" slot-scope="item,index">
             <a-button :title="item.title" size="small" type="link" @click="toDetail(item.id)">
               {{index + 1}}.{{item.title}}
             </a-button>
           </a-list-item>
         </a-list>
       </div>
      </a-col>
    </a-spin>
  </a-row>
</template>

<script>
  import { STable } from '@/components'
import { getArticleDetail, getArticleList, getCatList } from '@/api/article'
import { getHot } from '@/api/video'

export default {
  components: {
    STable
  },
  name: 'Article',
  data () {
    return {
      articleColumns: [
        {
          title: '二级分类',
          dataIndex: 'category_name',
          scopedSlots: { customRender: 'category_name' }
        },
        {
          title: '标题',
          dataIndex: 'title',
          scopedSlots: { customRender: 'article_title' },
          width: '320px',
          ellipsis: true
        },
        {
          title: '发布时间',
          dataIndex: 'create_time'
        },
        {
          title: '浏览次数',
          dataIndex: 'view'
        }
      ],
      categoryOpts: [],
      articleData: parameters => {
        return getArticleList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      articleVisible: true,
      articleDetail: {},
      articleLoading: true,
      hotArticle: [],
      queryParam: {}
    }
  },
  created () {
    this.getCategoryList()
  },
  methods: {
    getCategoryList () {
      this.articleLoading = true
      getCatList().then(res => {
        if (res.status === 0) {
          this.categoryOpts = res.result.data
          // this.getArticleList()
        }
      }).finally(() => {
        this.queryParam['filter[cat_id]'] = this.categoryOpts[0].id
        this.articleLoading = false
        this.$refs.table.refresh(true)
      })
    },
    // getArticleList (id) {
    //   const parameter = {}
    //   parameter['filter[cat_id]'] = id
    //   getArticleList(parameter).then(res => {
    //     this.articleData = res.result.data
    //     this.articleLoading = false
    //   })
    // },
    onChangeCategory (key) {
      this.articleVisible = true
      this.queryParam['filter[cat_id]'] = key
      this.$refs.table.refresh(true)
    },
    backArticleList () {
      this.articleDetail = {}
      this.articleVisible = true
    },
    toDetail (id) {
      const app = this
      app.articleVisible = true
      getArticleDetail(id).then(res => {
        if (res.status === 0) {
          app.articleDetail = res.result
          app.articleVisible = false
          const params = {}
          params['page_size'] = 7
          getHot(id, params).then(res => {
            app.hotArticle = res.result.data
          })
        }
      })
    }
  }
}
</script>

<style scoped>
article {
  font-size: 16px;
  line-height:30px;
  padding: 0 5px;
}
</style>
